<template>
  <div>
    <searchbar></searchbar>
    <div class="cate">
      <group v-on:tabChange="tabChange" v-bind:groups="group" v-bind:num="id"></group>
      <div ref="wrapper" class="goods" >
        <div>
        <goods  v-for='(item, index ) in goodsinfo' v-bind:goodsinfo="item"  v-bind:type="item.type.length" :key="index"></goods>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import store from '../../vuex/store'
  import searchbar from './searchbar'
  import Bscroll from 'better-scroll'
  import group from './group'
  import goods from './goods'
  export default {
    name: "category",
    components: {
      searchbar,
      group,
      goods
    },
    data() {
      return {
        id: 0,
        group: [{
          name: "田园蔬菜",
          id: 0,
        }, {
          name: "肉类家禽",
          id: 1,
        }
        ],

      }
    },
    computed: {
      goodsinfo () {
        return store.state.goodsinfo
      }
    },
    methods: {
      tabChange: function (v) {
        this.id = v;
      },
      add:function () {

      }
    },
    created(){

    },
    mounted() {

      this.$nextTick(() => {

        this.scroll = new Bscroll(this.$refs.wrapper, {
          click: true,
          // scrollX:true,
          scrollY:true,
          // eventPassthrough:'verti'
        })
        this.scroll.refresh()
      })
    }
  }
</script>

<style lang="less" scoped>
  .searchbar {
    line-height: 50px;
  }

  .search-btn {
    display: inline-block;
    margin: 10px auto;
    width: 90%;
    background-color: #888888;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .cate {
    width: 100%;
    height: calc(100vh - 100px);
    border-top:1px solid @_lgrey;
  }
  .goods{
    width: 75%;
    float: left;
    box-sizing: border-box;
    border-left: 1px solid @_lgrey;
    background-color: #fff;
    height: 100%;
    overflow: auto;
  }
</style>
